<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>happy</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            /* box-sizing: border-box; */
            /* font-family: 'Bad Script', cursive; */

        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #111;
        }

        h2 {
            display: flex;
            color: transparent;
            font-size: 15vh;
        }

        h2 span {
            animation: animate 5s linear infinite;
            animation-delay: calc(0.1s * var(--i));

        }

        @keyframes animate {
            0% {
                color: #fff;
                filter: blur(0px) hue-rotate(0deg);
                text-shadow: 0 0 10px #00b3ff,
                    0 0 20px #00b3ff,
                    0 0 40px #00b3ff,
                    0 0 80px #00b3ff,
                    0 0 120px #00b3ff,
                    0 0 200px #00b3ff,
                    0 0 300px #00b3ff,
                    0 0 400px #00b3ff;

            }

            30%,
            70% {
                color: #fff;
                filter: blur(1px) hue-rotate(360deg);
                text-shadow: 0 0 10px #00b3ff,
                    0 0 20px #00b3ff,
                    0 0 40px #00b3ff,
                    0 0 80px #00b3ff,
                    0 0 120px #00b3ff,


            }

            100% {
                color: transparent;
                box-shadow: none;
                filter: blur(1px) hue-rotate(0deg);
            }

        }
    </style>
</head>

<body>
    <h2>
        <span style="--i:1;">H</span>
        <span style="--i:2;">a</span>
        <span style="--i:3;">p</span>
        <span style="--i:4;">p</span>
        <span style="--i:5; margin-left:10px ;">D</span>
        <span style="--i:6;">i</span>
        <span style="--i:7;">w</span>
        <span style="--i:8;">a</span>
        <span style="--i:9;">l</span>
        <span style="--i:10;">i</span>


    </h2>
</body>

</html>